<template>
  <div id="home">

    <NavBar class="home-nav" ><div slot="center">漫画屋</div></NavBar>
    <tab-control  :titles="['漫画A','动画C','游戏G']" @tabClick="taboncilck" ref="tabcontrol1" v-show="isfixed"></tab-control>

    <Scroll class="home-content"
            ref="scroll"
            :probe-type="3"
            @scrollpos="changeshow" :pull-up-load="true" @loaddata="loadmoredata">
    <home-swiper :banners="banners" @loadimg="loadimg" ></home-swiper>
    <home-recommend-view :recommends="recommends"></home-recommend-view>
    <home-feature-view></home-feature-view>
    <tab-control  :titles="['漫画A','动画C','游戏G']" @tabClick="taboncilck" ref="tabcontrol2" ></tab-control>
    <goods-list :goods="showgoods"/>
    </Scroll>

    <BackTop @click.native="back2top" v-show="backtopshow"></BackTop>
  </div>
</template>

<script>
  import NavBar from "components/common/navbar/NavBar";
  import Scroll from "components/common/scroll/Scroll";
  import BackTop from "components/common/backtop/BackTop";

  import TabControl from "components/content/TabControl/TabControl";
  import GoodsList from "components/content/goods/GoodsList";

  import HomeRecommendView from "./childComps/HomeRecommendView";
  import HomeSwiper from "./childComps/HomeSwiper";
  import HomeFeatureView from "./childComps/HomeFeatureView";

  import {itemlistenerMixin} from "../../common/mixin";

  import {
    getHomeMultidata,
    getHomeGoods
  } from "network/home";




  export default {
    name: "Home",
    data(){
      return {
        banners:[],
        recommends:[],
        goods:{
          'pop':{page:0,list:[]},
          'new':{page:0,list:[]},
          'sell':{page:0,list:[]}
        },
        currentType:'pop',
        backtopshow:false,
        tabcontrol_offsettop:0,
        isfixed:false,
        currentplace: 0,


      }
    },

    components:{

      GoodsList,
      TabControl,

      NavBar,
      Scroll,
      BackTop,

      HomeRecommendView,
      HomeSwiper,
      HomeFeatureView

    },

    mixins:[itemlistenerMixin],
    created() {
      console.log('home created');
      this.getmultdata()
      this.getgoods('pop')
      this.getgoods('new')
      this.getgoods('sell')



    },


    activated() {
      console.log('home activated');
      this.$refs.scroll.backtotop(0,this.currentplace)
      this.$refs.scroll.refresh()
    },
    deactivated() {
      console.log('home deactivated');
      this.currentplace = this.$refs.scroll.gety()
      this.$bus.$off('imageloaded',this.itemImgListener)
    },
    computed:{
      showgoods(){
        return this.goods[this.currentType].list
      }
    },
    mounted() {
      console.log('home mounted');
    },
    methods:{
      //获取tab-control的offsettop $el可以获得组件的元素
      loadimg(){
        this.tabcontrol_offsettop=this.$refs.tabcontrol2.$el.offsetTop;
      },




      //事件监听
      taboncilck(index){
        switch (index){
          case 0:
            this.currentType = 'pop'
            break
          case 1:
            this.currentType = 'new'
            break
          case 2 :
            this.currentType = 'sell'
            break
        }

        this.$refs.tabcontrol1.currentIndex=index
        this.$refs.tabcontrol2.currentIndex=index
      },


      back2top(){
        this.$refs.scroll.backtotop(0,0)
      },

      loadmoredata(){
        this.getgoods(this.currentType)
      },

      changeshow(pos){

        this.backtopshow=-pos.y>1000

        this.isfixed = -pos.y>this.tabcontrol_offsettop
      },



      //网络请求

      //1.请求多个数据
      getmultdata(){
        getHomeMultidata().then(res =>{
          console.log(res.data);
          this.recommends=res.data.recommend.list;
          this.banners=res.data.banner.list;
          console.log('banner');
          console.log(this.banners);
          // this.components = res.data.recommend.list;
        })
      },

      //2.请求商品数据
      getgoods(type){
        const page=this.goods[type].page + 1
        getHomeGoods(type,page).then(res =>{
          console.log(res);
          this.goods[type].list.push(...res.data.list)

          this.goods[type].page += 1

          this.$refs.scroll.finfishpullup()
        })


      }
    }
  }
</script>

<style scoped>
  #home{

    height:100vh;
    position: relative;
  }
  .home-nav{
    background-color: var(--color-tint);
    color: white;

    position: relative;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }



  .home-content{

    position: absolute;
    top:44px;
    bottom: 49px;
    right:0px;
    left: 0px

  }

  .fixed{
    position: fixed;
    left: 0;
    right: 0;
    top: 44px;

  }
</style>
